// page组件
Vue.component('qfPage', {
    props: {
        total: {
            type: Number,
            default: 0,
        },
        pageSize: {
            type: Number,
            default: 2,
        },
    },
    data() {
        return {
            totalPage: 0
        }
    },
    watch: {
        total: {
            handler(newdata) {
                // console.log(newdata);
                this.totalPage = Math.ceil(this.total/this.pageSize)
                // console.log(this.totalPage);
            },
            immediate: true,
        }
    },
    template: `
        <div class="qf-page">
            <span v-for="num in totalPage" @click="$emit('click-page',num)">{{num}}</span>
        </div>
    `,
})
// dialog组件 
Vue.component('qfDialog', {
    props: {
        title: {
            type: String,
            default: "文本标题"
        },
        content: String,
        visible: {
            type: Boolean,
            default: false,
        },
    },
    template: `
    <div class="qf-dialog" v-if="visible">
        <div class="box">
            <div class="header">{{title}}</div>
            <div class="main"></div>
            <div class="footer">
                <button @click="$emit('update:visible',false)">取消</button>
                <button>确定</button>
            </div>
        </div>
    </div>`
})
// loading2组件
Vue.component('qfLoading2', {
    props: {
        state: {
            type: Boolean,
            default: false,
        },
    },
    template: `
    <div class="qf-loading2" v-if="state" @click="$emit('update:state',false)">
        <span>loading...</span>
    </div>
    `,
})
// loading1组件
Vue.component('qfLoading1', {
    props: {
        state: {
            type: Boolean,
            default: false,
        },
    },
    template: `
    <div class="qf-loading1" v-if="state">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </div>
    `,
})
// 按钮组件
Vue.component('qfButton', {
    props:  {
        content: {
            type: String,
            required: true,
        },
        type: {
            type: String,
            default: 'primary',
        }
    },
    template: `<button :class="['qf-button', 'qf-button--'+type ,'qf-button--normal']">
    <div class="qf-button_content">
    <span class="qf-button_text">{{ content }}</span>
    </div>
    </button>`
})
// 导航栏组件
Vue.component('qfNavBar',{
    props: {
        title: {
            type: String,
            requried: true,
        },
        leftArrow: Boolean,
    },
    template: `
        <div class="qf-nav-bar">
            <span @click="$emit('click-left')" >
            {{leftArrow ? '<返回' : ' ' }}
            </span>
            <span>{{title}}</span>
            <span @click="$emit('click-right')" >搜索</span>
        </div>    
    `
})
// 表单组件
Vue.component('qfTable',{
    props: {
        state: {
            type: Boolean,
            default: true,
        }
    },
    data() {
        return {
            // account: '',
            // password: '',
            formData: {
                account: '',
                password: '',
            }
        }
    },
    template: `
        <fieldset>
        <!--
            <legend>封装的表单</legend>
            用户名：<input type="text" v-model="account"/>
            密码：<input type="password" v-model="password"/>
            <button @click="$emit('submit', account,password)">提交</button>
           --> 
           用户名：<input type="text" v-model="formData.account"/>
           密码：<input type="password" v-model="formData.password"/>
           <button v-if="state" @click="$emit('submit',formData)">提交</button>
        </fieldset>
    `
})